<template>
    <div class="container">
        <div class="title">活动名称: {{ route.query.name }}</div>
        <div class="search"></div>
        <ZwSearchForm row-num="3" :option="searchOption2" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()">
        </ZwTable>
    </div>
    <el-drawer v-model="drawer" direction="rtl" size="30%">
        <template #header>
            <div class="dialog_header">客户名称: {{ userName }}</div>
        </template>
        <template #default>
            <div class="header_box">
                <div class="header_item">
                    <div class="header_item_title">累计签到次数</div>
                    <div class="header_item_content">
                        {{ sumTime.total_sign_frequency_num || 0 }}
                    </div>
                </div>
                <div class="border"></div>
                <div class="header_item">
                    <div class="header_item_title">最高连续签到次数</div>
                    <div class="header_item_content">
                        {{ sumTime.high_continuity_sign_frequency_num || 0 }}
                    </div>
                </div>
                <div class="border"></div>
                <div class="header_item">
                    <div class="header_item_title">最近签到时间</div>
                    <div class="header_item_content">{{ sumTime.lately_sign_time || '无' }}</div>
                </div>
            </div>
            <el-calendar v-model="nowTime">
                <template #dateCell="{ data }">
                    <span :class="onDateActive(data)">{{ getDate(data) }}</span>
                </template>
            </el-calendar>
        </template>
    </el-drawer>
</template>

<script setup lang="tsx">
import { ref, computed, reactive, watch } from 'vue';
import { useRoute } from 'vue-router';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { getClockInDetails, getDakaInfo, getDakaInfoBasic } from '@/api/smartMarketing/signIn';
import { deepCopy } from '@/utils/helper';
import { ElImage, ElIcon, ElButton } from 'element-plus';
import dayjs from 'dayjs';

const route = useRoute();
const searchOption2 = computed(() => {
    return [
        {
            label: '客户姓名',
            name: 'cust_name',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入'
        }
    ];
});
const tableOption = [
    {
        prop: 'title',
        label: '参与者',
        render({ row, column, index }) {
            const slotError = () => (
                <div class="image_slot">
                    <ElIcon>
                        <IconPicture />
                    </ElIcon>
                </div>
            );
            return (
                <div class="cusInfo">
                    <ElImage
                        preview-src-list={[row.headimgurl]}
                        preview-teleported={true}
                        vSlots={{ error: slotError }}
                        src={row.headimgurl}
                        fit="cover"
                        class="avatar"></ElImage>
                    <span style="margin-left: 6px">
                        {row.nickname}
                        <span vShow={row.remark}>（{row.remark}）</span>
                    </span>
                </div>
            );
        }
    },
    {
        label: '累计签到次数',
        prop: 'total_sign_frequency_num'
    },
    {
        label: '最近签到时间',
        prop: 'lately_sign_time'
    },
    {
        label: '任务完成情况',
        prop: 'task_status'
    },
    {
        prop: 'operate',
        label: '详情',
        align: 'left',
        fixed: 'right',
        isOperate: true,
        renderOperate({ row }) {
            return (
                <>
                    <ElButton size="small" onClick={() => onSelectRowInfo(row)}>
                        打卡明细
                    </ElButton>
                </>
            );
        }
    }
];
const defaultParams = reactive({
    activity_id: route.query.id,
    name: ''
});
const state = reactive({
    searchParams: deepCopy({ ...defaultParams, activity_id: route.query.id })
});
const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return getClockInDetails;
};
const search = async (data: any): Promise<void> => {
    state.searchParams = deepCopy({ ...defaultParams, ...data, activity_id: route.query.id });
};
const reset = async (v: any): Promise<void> => {
    state.searchParams = deepCopy(defaultParams);
};
const drawer = ref(false);
const checkTime = ref([]);
const sumTime = ref({});
const userName = ref('');
const nowTime = ref(new Date());
const selectRowInfo = ref<any>({});
const onSelectRowInfo = (row: any) => {
    selectRowInfo.value = row;
    onGetInfo();
};
const onGetInfo = async (yStr?: any, mStr?: any) => {
    userName.value = selectRowInfo.value.nickname || selectRowInfo.value.cust_nickname;
    const d = new Date();
    const y = d.getFullYear(); //获取年份
    const m = d.getMonth() + 1; //获取月份
    const dateStr = y + '-' + m; //需要获取此月最后一天的日期
    const dateObj = new Date(dateStr);
    const nextMonth = dateObj.getMonth() + 1; //0-11，下一个月
    //设置当前日期为下个月的1号
    dateObj.setMonth(nextMonth);
    dateObj.setDate(1); //1-31
    const nextMonthFirstDayTime = dateObj.getTime(); //下个月一号对应毫秒
    const theMonthLastDayTime = nextMonthFirstDayTime - 24 * 60 * 60 * 1000; //下个月一号减去一天，正好是这个月最后一天
    const theMonthDay = new Date(theMonthLastDayTime).getDate();
    const filter_time1 = yStr ? `${yStr}-${mStr}-01` : `${y}-${m}-01`;
    const filter_time2 = yStr ? `${yStr}-${mStr}-${new Date(yStr, mStr, 0).getDate()}` : `${y}-${m}-${theMonthDay}`;
    const params = {
        activity_id: route.query.id,
        openid: selectRowInfo.value.openid,
        filter_time: [filter_time1, filter_time2]
    };
    const params2 = { activity_id: route.query.id, openid: selectRowInfo.value.openid };
    drawer.value = true;
    Promise.all([getDakaInfo(params), getDakaInfoBasic(params2)]).then(res => {
        checkTime.value = res[0].daka_time;
        sumTime.value = res[1];
    });
    // checkTime.value = res.daka_time
};
const getDate = (date: any) => {
    const dateArr = date.day.split('-');
    const present = dayjs().format('YYYY-MM-DD').replaceAll('-', '');
    const day = date.day.replaceAll('-', '');
    if (present == day) {
        return '今';
    } else {
        return dateArr[2];
    }
};
const onDateActive = (date: any) => {
    const dateArr = date.day.split('-');
    const present = dayjs().format('YYYY-MM-DD').replaceAll('-', '');
    const day = date.day.replaceAll('-', '');
    if ((checkTime.value.includes(date.day) && day < present) || checkTime.value.includes(date.day)) {
        return 'isDateColor';
    } else {
        if (day < present) {
            return 'DateColor';
        }
    }
};
watch(nowTime, res => {
    const y = res.getFullYear();
    const m = res.getMonth() + 1;
    onGetInfo(y, m);
});
</script>

<style lang="scss" scoped>
:deep(.el-calendar-table td) {
    border: none;
}
.rest {
    margin-left: 3px;
    padding: 5px;
    border-radius: 50%;
    background-color: #fb7c4d;
    color: #fff;
}
:deep(.el-calendar-day) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.isDateColor {
    padding: 11px;
    border-radius: 50%;
    color: #fff;
    background: #ff6b00;
}
.DateColor {
    padding: 11px;
    border-radius: 50%;
    color: #fff;
    background: #cfcccf;
}
.container {
    padding: 16px;
    background-color: #fff;
    .title {
        padding-bottom: 16px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
    }
    .table {
        padding-top: 16px;
    }
}
.title_boder {
    height: 1px;
    margin-bottom: 16px;
    background: #eaeaea;
}
.header_box {
    display: flex;
    justify-content: space-between;
    height: 82px;
    padding: 16px 6px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #35383a;
    line-height: 12px;
    border: 1px solid #eaeaea;
    .header_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        .header_item_content {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6b00;
            line-height: 16px;
        }
    }
    .border {
        width: 1px;
        height: 50px;
        background: #f0f0f0;
        border-radius: 1px;
    }
}
.avatar {
    width: 36px;
    height: 36px;
    font-size: 36px;
}
:deep(.avatar) {
    width: 36px;
    height: 36px;
    font-size: 36px;
}
:deep(.cusInfo) {
    display: flex;
    align-items: center;
}
</style>
